<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix = "c"  uri = "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css"  href="css/bootstrap.min.css"/>
	<title>凯胜项目管理系统</title>
	<style type="text/css">
		body{
			padding-top:50px;
		}
	</style>
</head>
<body class="body">
	<%@include file="same2.jsp" %>
	<div class="container">
		<div class="row">
			<%@include file="same.jsp" %>
			<div class="span9">
			<div class = "modal hide " style = "dispaly:inline;" id="mymodal" >
				<div class = "modal-header" >
					<input type="button" value="x" style = 'color:black' class = "close" data-dismiss = "modal"/>
					<h3 style = "color:red">添加新文件夹</h3>
				</div>
				<div class = "modal-body" style = "height:100px;margin-top:20px">
						<form  id = "myform" class="form-horizontal" action = "file.jspx?method=createFiles" method = "post">
								<div><span id = "myspantishi" style = "margin-left:250px;color:red"></span></div>
								<div><sapn style = "margin-right:20px">文件名称：</span><input type="text" id="myfilename1" name="name" class="span5" id="input01" style="width:350px;margin-right:20px"></sapn><input  type = "button" id = "mycreatename" class = "btn,btn-primary" value="创建" >
								</div>
								
						</form>
				</div>
			</div>
			
			
				<div class="clear"></div>
				 <ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:20px">
				 
					<li class="active">
						<a href="task.html"><i class="icon-th"></i>文件列表</a>
					</li>
					<li style="float:right"><a  id = "add" style = "cursor:pointer" ><i class="icon-plus"></i><img src="img/1.png" title = "创建新文件夹"/></a></li>
					<li style="float:right"><a  id = "addRow" href = "javascript:;" style = "cursor:pointer" ><i class="icon-plus"></i><img src="img/1.png" title = "创建新文件夹"/></a></li>
				</ul>
				<div class="wall" style="border-top:none; border:1px solid #dddddd ">
					<div style="margin-top:20px;margin-left:10px;margin-right:10px " >
						<table class="table table-striped">
							<thead>
								<tr>
									<th width="30px"></th>
									<th width="60%">名称</th>
									<th width="20%">大小</th>
									<th>创建人</th>
								</tr>
							</thead>
							<tbody>
							<c:choose>
								<c:when test="${empty requestScope.filesList.list }">
									
										<tr id = "myyincang">
											<td colspan = "4"> 暂时没有你参与的项目的相关文件</td>
										</tr>
									
									
								</c:when>
								<c:otherwise>
								 <c:forEach items = "${requestScope.filesList.list}" var = "files">
								 	<tr>
										<td><img src="img/1.png"/></td>
										<td ><form id = "${files.id}"  class = "${param.p}" method = "post"><a  name = "myname" href="file.jspx?method=toSingleFile&id=${files.id}"  class="link-black mylink " >${files.filesname}</a></form>
										</td>
										<td>${files.totalNum }files &nbsp;&nbsp;         ${files.size}</td>
										<td>${files.user.username}</td>
									</tr>
								 </c:forEach>
								
								</c:otherwise>
							</c:choose>
								
							</tbody>
						</table>
						<div class = "well" id = "myplay" style = "display:none;width:150px;height:150px;border:1px solid #5abdec;padding:0px">
							<ul class = "nav nav-list" style = "margin-top:10px" >
								<li class = "myli" id = "reopen" style = "height:30px;" ><a  href=""> <i class="icon-book"></i>打开</a></li>
								<li class = "myli " id = "rename" style = "height:30px;"><a href="javascript:;"><i class="icon-book"></i>重命名</a></li>
								<li class = "myli" id = "redel" style = "height:30px;"><a href="javascript:;"><i class="icon-trash"></i>删除</a></li>
							</ul>
						</div>
						<div class = "modal hide " id="mymodal2" >
							<div class = "modal-header">
										<input type="button" value="x" style = 'color:black' class = "close" data-dismiss = "modal"/>
										<h3>删除文件夹</h3>
							</div>
							<div class = "modal-body" style = "text-align:center;height:40px;margin-top:30px">
								<div >你确定要删除文件夹     <span id = "delName" style = "color:red;font-size:20px;font-weight:bold"></span>？</div>		
							</div>
							<div class = "modal-footer">
								<a  id = "newtodelFiles" class = "btn btn-primary"   >是</a>
								<a href="" class = "btn" data-dismiss = "modal" >否</a>
							</div>
						</div>
						<div style="margin-top:2px;margin-right:10px"  class="pagination pagination-right">
						 <ul>
						 <c:choose>
							    
							 	<c:when test="${ requestScope.filesList.totalPage == 1}">
									<li class = "active"><a>共一页</a></li>
								</c:when>
								<c:when test="${ requestScope.filesList.totalPage > 1 && requestScope.filesList.totalPage <=2}">
									<c:choose>
									<c:when test="${filesList.pageNum == 1}">
										
										<li class = "active"><a>1</a></li>
										<li ><a href = "file.jspx?p=2">2</a></li>
										<li><a href = "file.jspx?p=2">next</a></li>	
										<li><a href = "#">共两页</a></li>
									</c:when>
									<c:when test="${filesList.pageNum == 2}">
										
										<li><a href="file.jspx?p=${filesList.pageNum-1}">Prev</a></li>
										<li ><a href = "file.jspx?p=1">1</a></li>
										<li class = "active"><a href = "file.jspx?p=2">2</a></li>
										<li><a href = "#">共两页</a></li>
										
									</c:when>	
									</c:choose>	
								</c:when>
								<c:when test="${requestScope.filesList.totalPage > 2}">
								<c:choose>
									<c:when test="${filesList.pageNum == 1}">
										<li><a href="#">Prev</a></li>
										<li class = "active"><a>1</a></li>
										<li ><a href = "file.jspx?p=2">2</a></li>
										<li><a>...</a></li>	
										<li><a href = "file.jspx?p=${filesList.pageNum+1}">next</a></li>	
										<li><a href = "#">共${filesList.totalPage}页</a></li>
									</c:when>
									<c:when test="${filesList.pageNum == 2}">
										
										<li><a href="file.jspx?p=${filesList.pageNum-1}">Prev</a></li>
										<li ><a href = "file.jspx?p=1">1</a></li>
										<li class = "active"><a href = "file.jspx?p=2">2</a></li>
										<li><a>...</a></li>
										<li><a href = "file.jspx?p=${filesList.pageNum+1}">next</a></li>	
										<li><a href = "#">共${filesList.totalPage}页</a></li>
									</c:when>	
									<c:when test="${filesList.pageNum > 2}">
										<c:choose>
											<c:when test="${filesList.totalPage < filesList.pageNum}">
											
											
											
											</c:when>
											<c:when test="${filesList.totalPage >= filesList.pageNum}">
												<li><a href="file.jspx?p=${DocuList.pageNum-1}">Prev</a></li>
												<li ><a href = "file.jspx?p=1">1</a></li>
												<li ><a href = "file.jspx?p=2">2</a></li>
												<li><a>...</a></li>	
												<li class = "active"><a >${filesList.pageNum}</a></li>	
												<li><a href = "#">next</a></li>
												<li><a href = "#">共${filesList.totalPage}</a></li>
													
											
											</c:when>
											
										
										
										</c:choose>
										
									
									
									
									</c:when>
									</c:choose>	
									
									
								</c:when>	
									
							 </c:choose>
							 </ul>
							 </div>
							 
					</div>
				</div>
		</div>
	</div>
</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src = "js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#myid li").eq(5).addClass("active");
			$("#myid i").eq(3).addClass("  icon-white");
			$("#add").click(function(){
				$("#mymodal").modal("show");
			}); 
			$("#mycreatename").click(function(){
				var v= $("#myfilename1").val();
				if(v.trim().length ==0){
					$("#myspantishi").html("文件名不能为空");
					return;
				}else{
					var r = result(v);
					if(!r){
						$("#myform").submit();
					}
				}
				
			});
			function result(v){
				if(v.trim().length !=0){
					var name = document.getElementsByName("myname");
					for(var i=0;i<name.length;i++){
						var val = $(name[i]).html();
						if(v == val){
							$("#myspantishi").html("文件重名");
							return true;
						}
					}
					return false;
				}
			};
			$("#myfilename1").keyup(function(){
				$("#myspantishi").html("");
			
			});
			$("#addRow").click(function(){
				$("<tr><td><img src='img/1.png'/></td><td><form id = 'button' method = 'post' ><input class= 'myaddnewfile'  type='text' name = 'name' value = '新建文件夹'/></form></td><td></td><td></td></tr>").insertAfter("table tr:eq(0)");
				$("#myyincang").css("display","none");
				$("table tr:eq(1) .myaddnewfile").focus();
			});
			$(".myaddnewfile").live("blur",function(){
				var v = $(this).val();
				$(this).parent().attr("action","file.jspx?method=createFiles&name="+v);
				//$(this).replaceWith("<a style = 'cursor:pointer' class='mylink' >"+v+"</a>");
				$(this).parent().submit();
			
			
			});
			
			$(".myname").live("change",function(){
				var v = $(this).val();
				id = $(this).parent().attr("id");
				var p = $(this).parent().attr("class");
				if(p.length==0){
					p=1;
				}
				$(this).parent().attr("action","file.jspx?method=editName&id="+id+"&name="+v+"&p="+p);
				$(this).parent().submit();
				$(this).replaceWith("<a style = 'cursor:pointer' class='mylink' >"+v+"</a>");
				
			});
				
			
			$(".myname").live("blur",function(){
				var v = $(this).val();
				$(this).replaceWith("<a style = 'cursor:pointer' class='mylink' >"+v+"</a>");
			
			});
			
			$(".mylink").live("mousedown",function(e){
				
				if(e.which == 3){
					$(this).bind('contextmenu', function(e) {
							// 你弹出右键的函数
							var selfX=e.pageX;
							var selfY=e.pageY;
							$("#myplay").css({
								"display":"block",
								"position":"absolute",
								"top":selfY,
								"left":selfX,
								"z-index":"1"
								}	
							);
							var v = $(this).html();
							$(this).addClass("now");
							$("#rename").live("click",function(e){
								if(e.which == 1){
									$(".now").addClass("next");
									$(".next").replaceWith("<input class= 'myname'  type='text' name = 'name' value = '新建文件夹'/>");
									$(".myname").attr("value",v);
									$("#myplay").css("display","none");
									$(".myname").focus();	
								}		
							});
							$("#redel").live("click",function(e){
								if(e.which == 1){
									$(".now").addClass("refilesdel");
									var name = $(".refilesdel").html();
									var id = $(".refilesdel").parent().attr("id");
									var p = $(".refilesdel").parent().attr("class");
									if(p.length==0){
										p=1;
									}
									$("#mymodal2 #delName").html(name);
									$("#mymodal2 #newtodelFiles").attr("href","file.jspx?method=delFiles&id="+id+"&p="+p);
									$("#mymodal2").modal("show");
						
									
								}		
							});
							$("#reopen").live("click",function(e){
								if(e.which == 1){
									$(".now").addClass("open");
									var id = $(".open").parent().attr("id");
									$("#reopen a").attr("href","file.jspx?method=toSingleFile&id="+id);
						
									
								}		
							});
							//下面这句必须
							return false;		
					});	
				}
			
			});
			$("#myplay").mousemove(function(){
				$(this).css("display","block");
			
			});
			$("#myplay").mouseout(function(){
				$(this).css("display","none");
			
			});
			$(".myli").mousemove(function(){
				$(this).addClass("active");
			
			});
			$(".myli").mouseout(function(){
				$(this).removeClass("active");
			
			});
		});
	
		
		
	</script>
</body>
</html>